<script lang="ts">
	import Scrollbar from '$lib/components/Basic/Scrollbar/Scrollbar.svelte';
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import Drawer from '$lib/components/Feedback/Drawer/Drawer.svelte';
	import ThemeSwitcher from '$lib/components/Business/ThemeSwitcher.svelte';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { page } from '$app/state';
	import './index.scss';
	let { children } = $props();
	let clickName = $state('');
	const handleMenu = (name: string) => {
		clickName = name;
		goto('/component/' + name);
	};
	let drawerOpen = $state(false);
	const setDrawerOpen = (isOpen: boolean) => {
		drawerOpen = isOpen;
	};
	onMount(() => {
		clickName = page.url.pathname.replace('/component/', '');
	});
</script>

<div class="component-header">
	<div style="display: flex;align-items: center;color: var(--color-primary-500)">
		<Icon src="logo/favicon" size="24"></Icon>
		<span style="margin-left: 8px; font-size: 16px;font-weight:600;"> 东海大自营平台 </span>
	</div>
	<RectButton
		icon="interface/palette"
		type="text"
		onclick={() => setDrawerOpen(true)}
		iconSize={21}
		style="padding:6px; height: 33px;"
	></RectButton>
</div>
<div class="component-layout">
	<div class="component-list">
		<Scrollbar scrollWidth={8}>
			<div class="list-item">
				<div class="first-level-menu">首页</div>
				<div
					class="second-level-menu"
					onclick={() => {
						clickName = 'component';
						goto('/component');
					}}
					class:is-active={clickName === 'component'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Overview 组件总览
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('rule')}
					class:is-active={clickName === 'rule'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Rule 代码规范与设计规则
				</div>
				<div class="first-level-menu">Basic 基础组件</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('icon')}
					class:is-active={clickName === 'icon'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					icon 图标
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('button')}
					class:is-active={clickName === 'button'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Button 按钮
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('divider')}
					class:is-active={clickName === 'divider'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Divider 分割线
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('scrollbar')}
					class:is-active={clickName === 'scrollbar'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Scrollbar 滚动条
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('virtualScroll')}
					class:is-active={clickName === 'virtualScroll'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					VirtualScroll 虚拟滚动条
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('Tag')}
					class:is-active={clickName === 'Tag'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Tag 标签
				</div>
			</div>
			<div class="list-item">
				<div class="first-level-menu">Form 表单组件</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('radio')}
					class:is-active={clickName === 'radio'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Radio 单选框
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('checkbox')}
					class:is-active={clickName === 'checkbox'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Checkbox 多选框
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('input')}
					class:is-active={clickName === 'input'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Input 输入框
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('switch')}
					class:is-active={clickName === 'switch'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Switch 开关
				</div>
			</div>
			<div class="list-item">
				<div class="first-level-menu">Data 数据展示</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('table')}
					class:is-active={clickName === 'table'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Table 表格
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('collapse')}
					class:is-active={clickName === 'collapse'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Collapse 折叠面板
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('badge')}
					class:is-active={clickName === 'badge'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Badge 徽章
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('MultiSelectFilter')}
					class:is-active={clickName === 'MultiSelectFilter'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					MultiSelectFilter 多选筛选器
				</div>
			</div>
			<div class="list-item">
				<div class="first-level-menu">Feedback 反馈组件</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('modal')}
					class:is-active={clickName === 'modal'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Modal 模态弹窗
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('message')}
					class:is-active={clickName === 'message'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					message 消息提示
				</div>
				<div
					class="second-level-menu"
					onclick={() => handleMenu('tooltip')}
					class:is-active={clickName === 'tooltip'}
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					Tooltip 提示
				</div>
			</div>
		</Scrollbar>
	</div>
	<div class="component-content">
		<Scrollbar scrollWidth={8} scrollPadding={4}>
			{@render children?.()}
		</Scrollbar>
	</div>
</div>

<Drawer
	open={drawerOpen}
	title="主题配置"
	direction="right"
	size="400px"
	onClose={() => setDrawerOpen(false)}
>
	<div>
		<ThemeSwitcher isLayoutOpen={false}></ThemeSwitcher>
	</div>
</Drawer>
